import React from 'react';
import { ArrowRight, CheckCircle2, FileCheck } from 'lucide-react';
import { Link } from 'react-router-dom';

const WelcomePage = () => {
  return (
    <div className="max-w-6xl mx-auto px-4 py-12 bg-gray-50 min-h-screen">
      <div className="text-center mb-16">
        <h1 className="page-title text-4xl font-bold mb-6">金融术语标准化工具</h1>
        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
          专业的金融术语处理解决方案，帮助您快速实现金融文本标准化、术语查询与分析
        </p>
      </div>

      <div className="flex justify-center mb-16">
        <div className="card fade-in hover:shadow-lg transition-shadow w-full max-w-sm">
          <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
            <FileCheck className="text-blue-600 w-8 h-8" />
          </div>
          <h3 className="text-2xl font-semibold mb-4 text-center">术语标准化</h3>
          <p className="text-gray-600 mb-6 text-center">将非标准金融术语转换为行业标准表述，确保数据一致性</p>
          <Link to="/std" className="btn btn-primary mt-4 inline-flex items-center justify-center w-full">
            开始使用 <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
        </div>
      </div>

      <div className="card section-bg p-8 border border-blue-100 max-w-2xl mx-auto">
        <h2 className="text-2xl font-bold text-gray-900 mb-4 text-center">使用指南</h2>
        <ol className="space-y-4">
          <li className="flex items-start">
            <CheckCircle2 className="text-green-500 mt-1 mr-3 flex-shrink-0 h-5 w-5" />
            <p>点击"开始使用"按钮，进入术语标准化页面</p>
          </li>
          <li className="flex items-start">
            <CheckCircle2 className="text-green-500 mt-1 mr-3 flex-shrink-0 h-5 w-5" />
            <p>在文本框中输入包含金融术语的文本</p>
          </li>
          <li className="flex items-start">
            <CheckCircle2 className="text-green-500 mt-1 mr-3 flex-shrink-0 h-5 w-5" />
            <p>点击"标准化"按钮，系统将自动识别并标准化术语</p>
          </li>
          <li className="flex items-start">
            <CheckCircle2 className="text-green-500 mt-1 mr-3 flex-shrink-0 h-5 w-5" />
            <p>查看标准化结果，可复制或下载结果</p>
          </li>
        </ol>
      </div>
    </div>
  );
};

export default WelcomePage;